<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学校食谱</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="./css/window.css">
	<link rel="stylesheet" href="css/cookbook2.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="./student/css/head.css">
	<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
	<style scoped>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="container">
		<div id="vue-root">
			<div style="height: 40px;"></div>
			<div class="header">
				<div class="header_title">食谱查看</div>
				<img src="image/return.png" alt="" class="return" onclick="history.back()">
			</div>
			<div class="date_box">
				<div class="date">
					<div class="left" @click="subtract1()"><van-icon name="arrow-left" size="17" /></div>
					<div class="time">
						<div style="font-size: 16px;" v-text="date1"></div>
						<div style="margin-left: 4px;" v-text="day"></div>
					</div>
					<div class="right" @click="add1()"><van-icon name="arrow" size="17" /></div>
				</div>
				<div class="border"></div>
				<div class="day_box">
					<div class="day" :class="{'daySelect':selectDay==item.day}" v-for="item in dayList" :key="item.day"
						@click="changDay(item)">
						{{item.day}}
					</div>
				</div>
			</div>
			<!-- 食谱列表 -->
			<div class="cookbook2-conter" :style="{'max-height':allow?'525px':'580px'}">
				<div v-for="(meal, mealIndex) in meals" :key="mealIndex" class="cookbook2-conter_item">
					<div class="conter_item_title">
						{{ meal.title }}
					</div>
					<div class="conter_item_box">
						<div v-for="(day, dayIndex) in dayfuntion(meal.days)" :key="dayIndex" class="conter_item_a">
							<img v-if="day.img" class="conter_item_img" :src="getImg(day.img)" alt="">
							<span >{{ day.name }}</span>
							<div v-else style="color: #bebebe;text-align: center;">暂无数据</div>
						</div>
					</div>
				</div>
			</div>
			<van-row type="flex" justify="space-around" v-if="isTeacher()">
				<van-button @click="goUrl('./teacher/meals_management.html')" round  color="linear-gradient(to bottom, #73b7ff, #2087fd)">
				  餐费管理
				</van-button>
<!-- 				<van-col span="12">
					<van-button @click="goUrl('../teacher/meals_management.html')" round  color="linear-gradient(to bottom, #73b7ff, #2087fd)">
					  餐费管理
					</van-button>
				</van-col> 
				<van-col span="12">
				</van-col> -->
			</van-row>


			<!-- 添加食谱 -->
			<!-- <div class="addShiPu" v-if="allow" @click="mask=true"></div> -->
			<!-- 食谱弹窗 -->
			<div v-for="(item,index) in meals" :key="index" class="mask_layer" v-if="mask">
				<div class="mask_item" style="width: 85%;padding: 30px;">
					<div class="mask_box">
						<div class="mask_item_title">时间选择</div>
						<div class="mask_item_time_box">
							<!-- <div class="mask_item_time">8:30-9:00&nbsp;<van-icon name="arrow-down" color="#e1e1e1"
									size="17" /></div> -->
							<div class="mask_item_time"><input class="mask_item_time" v-model="item.title" placeholder="请输入餐名"/>
							</div>
						</div>
						<div class="mask_item_content">
							<div class="imgList">
								<div class="imgList_box" v-for="(item,i) in imgList" :key="i">
									<img class="imgList_img" :src="item.img" alt="">
									<!-- 删除当前图片 -->
									<img class="delImg" @click="" v-if="imgList.length" src="image/remove.svg" alt="">
								</div>
								<!-- 添加图片 -->
								<div class="addimg" v-if="imgList.length<3"><img src="image/cookAdd.png" alt="">
									<span style="font-size: 12px;color: #bebebe;">餐点图片</span>
								</div>
							</div>
							<div class="textarea_box">
								<p class="zhu">注：一张图片对应一个菜式名，多个菜式名使用英文逗号(,)隔开</p>
								<textarea class="cook-content-text" v-model="texts" cols="30" rows="5"
									placeholder="请添加菜式名"></textarea>
							</div>
						</div>
					</div>
					<div class="confirmBtn_box">
						<div class="btn" @click="confirmBtn()">确定</div>
						<div class="btn cancelbtn" @click="mask=false">取消</div>
					</div>
				</div>
				<div class="cancel" @click="mask=false" />
			</div>
		</div>
	</div>


	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>
	<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>

	<script src="/js/common.js"></script>

	<script src="/wechat/js/wx.js"></script>

	<script>
		function meal(title) {
			return {
				title: title,
				days: [0, 1, 2, 3, 4, 5, 6].map(function (i) {
					return { food: '', pics: [] };
				})
			};
		}
		var agengtId=localStorage.getItem('agentId');
		Vue.use(vant.Lazyload);
		dayjs.locale('zh-cn');
		var app = new Vue({
			el: '#vue-root',
			data: {
				dayList: [],
				selectDay: null,
				mask: false,
				imgList: [{ img: './image/center-background.jpg' }, { img: 'image/center-background.jpg' }, { img: 'image/center-background.jpg' }],
				texts: '',
				timeList1: false, //下拉框
				timeList2: false, //下拉框
				schoolId: 0,
				date: new Date(),
				cookbook: null,
				calendarDate: '',
				week: [],
				editing: false,
				iseditOk: false,
				meals: [],
				allow: isTeacher(),
			},
			created: function () {
				this.getData(this.date);

				this.dayList = this.getSurroundingDates();
			},
			methods: {
				goUrl: function (url) {
					window.location = url
				},
				dayfuntion: function (data) {
					var week = dayjs(this.date).format('dddd')
					var arr = []
					switch (week) {
						case '星期一':
							arr.push(data[0])
							break;
						case '星期二':
							arr.push(data[1])
							break;
						case '星期三':
							arr.push(data[2])
							break;
						case '星期四':
							arr.push(data[3])
							break;
						case '星期五':
							arr.push(data[4])
							break;
						case '星期六':
							arr.push(data[5])
							break;
						case '星期日':
							arr.push(data[6])
							break;
						// 可以有任意数量的case语句
						default:
							// 默认代码块
							break;
					}
					var strArr=arr[0].food.split(",")
					var arr2=[]
					for (let i = 0; i < strArr.length; i++) {
						arr2.push({
							img:arr[0].pics[i]||'',
							name:strArr[i]||''
						})
					}
					console.log(arr2);
					return arr2;
				},
				getSurroundingDates: function () {
					const today = this.date;
					const dates = [];

					for (let i = 3; i > 0; i--) {
						const date = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
						dates.push({ date1: date.toLocaleDateString(), date2: date, day: dayjs(date).format('DD'), week: dayjs(date).format('dddd') });
					}

					dates.push({ date1: today.toLocaleDateString(), date2: today, day: dayjs(today).format('DD'), week: dayjs(today).format('dddd') });

					for (let i = 1; i <= 3; i++) {
						const date = new Date(today.getFullYear(), today.getMonth(), today.getDate() + i);
						dates.push({ date1: date.toLocaleDateString(), date2: date, day: dayjs(date).format('DD'), week: dayjs(date).format('dddd') });
					}
					this.selectDay = dayjs(today).format('DD');
					return dates;
				},
				changDay: function (item) {
					this.date = item.date2;
					this.dayList = this.getSurroundingDates();
				},
				getData: function (date) {
					this.calendarDate = dayjs(date).format('YYYY-MM-DD dddd');
					this.week = [-3, -2, -1, 0, 1, 2, 3].map(function (it) {
						return dayjs(date).add(it, 'day').toDate();
					});

					axios.get((isTeacher() ? '/t' : '/s') + '/cookbook2/'+agengtId, {
						params: { date: dayjs(date).format('YYYY-MM-DD') }
					}).then(function (res) {
						var o = res.data;
						if (o) {
							this.schoolId = o.schoolId;
							this.meals = o.data;
						} else {
							this.meals = [];
						}
					}.bind(this));
				},
				add1: function () {
					this.date = dayjs(this.date).add(1, 'day').toDate();
					this.dayList = this.getSurroundingDates();
				},
				subtract1: function () {
					this.date = dayjs(this.date).subtract(1, 'day').toDate();
					this.dayList = this.getSurroundingDates();
				},
				addImg: function (pics) {
					wxChooseImg(3, 'cookbook', function (pic) {
						pics.push(pic);
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + agengtId + '/cookbook/' + pic;
				},
				delPic: function (pics, i) {
					pics.splice(i, 1);
				},
				clear: function (food) {
					food.food = '';
					food.pics = [];
				},
				addCookName: function () {
					this.meals.push(meal(''));
				},
				editOk: function () {
					this.editing = false;
					axios.post('/t/cookbook2?date=' + dayjs(this.date).format('YYYY-MM-DD'), {
						data: this.meals
					}).then(function (res) {
						alert('保存成功');
					});
				},
				bigImg: function (pics, index) {
					pics = pics.map(this.getImg); addCookName
					wxPreviewImg(pics, index);
				}
			},
			computed: {
				day: function () {
					return dayjs(this.date).format('dddd');
				},
				date1: function () {
					return dayjs(this.date).format('YYYY年MM月DD日');
				},
			},
			watch: {
				date: function (newValue, oldValue) {
					this.getData(newValue);
				},
			}
		});

		updateUnread('cookbook');
	</script>
</body>

</html>